<template>
	<div class="auto-scroll-compontent" :style="{width,height}">
		<div class="auto-scroll-outer" ref="frame" :class="[dir==='vertical'?'vertical-outer':'horizontal-outer']" >
			<div class="auto-scroll-wrapper" ref="wrapper"
				:class="[dir==='vertical'?'vertical-wrapper':'horizontal-wrapper']" 
				:style="{
					top:moveTop+'px',
					marginLeft:moveLeft+'px',
					transition:transition
				}"
			>
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, getCurrentInstance, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { eleResize } from '@/assets/js/utils'
const props = defineProps({
	dir:{
		type:String,
		default:'vertical'  /* 方向值：水平-horizontal 竖-vertical */
	},
	width:{
		type:String,
		default:'100%'
	},
	height:{
		type:String,
		default:'100%'
	},
	stepSpeed:{
		type:Number,
		default:500  /* 移动速度，单位 ms/100px */
	},
	wait:{
		type:Number,
		default:3000  /* 单次动画结束后的等待时间，单位 ms */
	}
})
const {dir,stepSpeed,wait} = toRefs(props)

const instance = getCurrentInstance()
let $frame = null;
let interval = null;
let roundTime = 0;
const outerWidth = ref(0)
const outerHeight = ref(0)
const wrapperWidth = ref(0)
const wrapperHeight = ref(0)
const moveDistance = ref(0)
const moveTop = ref(0)
const moveLeft = ref(0)
const transition = ref('all 0')

/* 创建div宽高变化监听器 */
const createEleResize = function(){
	$frame =  instance.refs.frame;
	eleResize.on($frame, eleListener);
}

/* div宽高监听器监听事件 */
const eleListener = function(){
	moveTop.value = 0;
	moveLeft.value = 0;
	callSize();
	pageClearInterval();
	createAnimation();
}

/* 动画数据计算 */
const callSize = function(){
	if (dir.value === 'vertical') {
		outerHeight.value = instance.refs.frame.offsetHeight;
		wrapperHeight.value = instance.refs.wrapper.offsetHeight;
		if (wrapperHeight.value>outerHeight.value) {
			moveDistance.value = wrapperHeight.value - outerHeight.value;
			roundTime = Math.floor((moveDistance.value/100)*stepSpeed.value)
			transition.value = 'top '+roundTime+'ms linear'
		} else {
			moveDistance.value = 0;
			roundTime = 0;
			transition.value = 'all 0'
		}
	} else {
		outerWidth.value = instance.refs.frame.offsetWidth;
		wrapperWidth.value = instance.refs.wrapper.scrollWidth;
		if (wrapperWidth.value>outerWidth.value) {
			moveDistance.value = wrapperWidth.value - outerWidth.value;
			roundTime = Math.floor((moveDistance.value/100)*stepSpeed.value)
			transition.value = 'margin-left '+roundTime+'ms linear'
		} else {
			moveDistance.value = 0;
			roundTime = 0;
			transition.value = 'all 0'
		}
	}
}

/* 创建动画计时器 */
const createAnimation = function(){
	if (roundTime) {
		if (dir.value === 'vertical'){
			animationVer();
			interval = window.setInterval(animationVer,roundTime+wait.value)
		} else {
			animationHor();
			interval = window.setInterval(animationHor,roundTime+wait.value)
		}
	}
}

/* 纵向滚动值变化 */
const animationVer = function(){
	if (moveTop.value===0) {
		moveTop.value = -moveDistance.value
	} else {
		moveTop.value = 0
	}
}

/* 横向滚动值变化 */
const animationHor = function(){
	if (moveLeft.value===0) {
		moveLeft.value = -moveDistance.value
	} else {
		moveLeft.value = 0
	}
}

/* 计时器清除 */
const pageClearInterval = function(){
	try{
		window.clearInterval(interval)
		interval = null;
	}catch(e){
		//TODO handle the exception
	}
}

/* div宽高变化事件移除 */
const destroyEleResize=function(){
	try{
		eleResize.off($frame, eleListener);
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	moveTop.value = 0;
	moveLeft.value = 0;
	createEleResize()
	callSize()
	createAnimation()
})

onBeforeUnmount(()=>{
	pageClearInterval();
	destroyEleResize();
})
</script>

<style scoped lang="scss">
.auto-scroll-compontent{
	.auto-scroll-outer{
		overflow: hidden;
		width: 100%;
		height: 100%;
		&.vertical-outer{
			position: relative;
		}
		&.horizontal-outer{
			
		}
	}
	.auto-scroll-wrapper{
		&.vertical-wrapper{
			position: absolute;
			width: 100%;
			height: auto;
			left: 0;
		}
		&.horizontal-wrapper{
			display: flex;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
<style lang="scss">
.auto-scroll-compontent{
	.auto-scroll-wrapper{
		&.horizontal-wrapper{
			&>*{
				flex-shrink: 0;
			}
		}
	}
}
</style>